<template>
	<view class="container">
		<my-tabs :tabData="tabData" :tabCurrent="tabCurrent" @handleClick="handleTabClick"></my-tabs>
		<view class="main">
			<view class="main-contanier" scroll-y="true">
				<radio-group @change="radioChange" ref="radioGroupRef" v-if="tableDatas.datas.length">
					<view class="task-details" v-for="(row,rowIndex) in tableDatas.datas"
						:key="tabCurrent+'-'+ row.ReportID+'-'+rowIndex">
						<view class="task-head">
							<view class="head-label">
								任务名称：
							</view>
							<view class="head-text-part">
								{{ row.PreparePlanName }}
							</view>
						</view>
						<view class="list" v-for="(item,index) in listData" :key="index">
							<view class="label">
								{{ item.label+':'}}
							</view>
							<view class="text-part">
								{{ row[item.prop]}}
							</view>
						</view>
						<view class="list-1">
							<view class="label">
								任务进度：
							</view>
							<view class="text-part">
								<u-line-progress type="success" :percent="row.TaskProgress"></u-line-progress>
								<u-number-box v-if="tabCurrent===1" :max="100" size="30"
									v-model.number="row.TaskProgress"
									@change="progressChange($event,row)"></u-number-box>
							</view>
						</view>
						<view class="select-btn" v-if="tabCurrent!==1">
							<label class="radio">
								<radio :value="String(row.ReportID)" :checked="rowIndex === radioCurrent" />
							</label>
						</view>
					</view>
				</radio-group>
				<u-empty text="暂无数据" mode="list" v-else></u-empty>
				<view class="btn-part">
					<template v-for="(item,index) in buttonList">
						<template v-if="index===tabCurrent">
							<u-button v-for="(bItem,bIndex) in item" :type="bItem.type" :disabled="bItem.disabled"
								:key="index+'-'+bIndex" @click="submit(bItem.value)">{{bItem.label}}</u-button>
						</template>
					</template>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import myTabs from '@/components/myTabs/index.vue'
	import myLineProgress from '@/components/myLineProgress/index.vue'
	export default {
		components: {
			myTabs,
			myLineProgress
		},
		computed: {
			listData() {
				return this.tableDatas.columns.filter(val => this.tableDatas.listProp.includes(val.prop))
			},
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		data() {
			return {
				tabData: ['未完成', '进行中', '异常任务'],
				tabCurrent: 1,
				tableDatas: {
					ID: 6748,
					datas: [],
					columns: [],
					listProp: ['Name', 'ReportDate1', 'ReportDate2', 'ReportDate3', 'MaterialName',
						'SourceOrderNo', 'CreatedByName'
					],
					listProp2: ['Name', 'ReportDate1', 'ReportDate2', 'ReportDate3', 'MaterialName',
						'SourceOrderNo', 'CreatedByName', 'StartDate'
					],
					condition: {},
					selectRow: null
				},
				radioValue: '',
				buttonList: [
					[{
						label: '开始生产',
						value: 1,
						disabled: false,
						type: 'primary'
					}],
					[{
							label: '切换',
							value: 4,
							disabled: false,
							type: 'warning'
						},
						{
							label: '提报异常',
							value: 3,
							disabled: false,
							type: 'error'
						},
						{
							label: '提交进度',
							value: 2,
							disabled: false,
							type: 'success'
						},
					],
					[{
						label: '进入异常',
						value: 5,
						disabled: false,
						type: 'warning'
					}],
				],
				startX: 0,
				endX: 0,
				isClick: false,
				radioCurrent: null,
				defaultProgress: 0,
			}
		},
		onLoad(e) {
			if (e.tabCurrent) this.handleTabClick(Number(e.tabCurrent))
			this.getApsData(this.tabCurrent)
		},
		onShow(e) {
			this.getApsData(this.tabCurrent)
		},
		methods: {
			handleTabClick(index, msg = '') {
				this.tabCurrent = index
				this.tableDatas.selectRow = null
				this.getApsData(index).then(() => {
					this.$set(this, 'radioCurrent', null)
					if (msg) {
						uni.showToast({
							title: msg,
							icon: 'success'
						})
					}
				})
			},
			// 获取数据
			async getApsData(remark = 0) {
				// 管理员和特殊主管
				const Names = this.userInfo.RoleMap?.some(val => val.RoleID === 'E01Admin' || val.RoleID ===
					'R202504250001') ? '' : this.userInfo.Name
				const condition = {
					dicID: 6748,
					Names,
					ProductionStatus: remark === 0 ? 86 : remark === 1 ? 87 : 89
				}
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				if (!res) return
				const {
					msg,
					data,
					Columns
				} = res
				// 后端暂时没传 TaskProgress字段 先配置为0
				if (data.length) {
					data.forEach(val => {
						val.TaskProgress = val.TaskProgress || 0
					})
					this.defaultProgress = data[0].TaskProgress
				}
				this.$set(this.tableDatas, 'datas', data)
				this.$set(this.tableDatas, 'columns', Columns[0])
			},
			// 选择切换
			radioChange(e) {
				const value = e.detail.value
				const row = this.tableDatas.datas.find(val => String(val.ReportID) === String(value))
				this.$set(this.tableDatas, 'selectRow', row)
			},
			async submit(SubmitType = 1) {
				// 开始生产：1；结束生产：2；异常提报：3；切换：4；异常结束：5；撤销异常：6
				const rowData = this.tabCurrent === 1 ? this.tableDatas.datas[0] : this.tableDatas.selectRow
				if (!rowData) return uni.showToast({
					title: '请选择数据',
					icon: 'error'
				})
				rowData.SubmitType = SubmitType
				rowData.Name = this.userInfo.Name
				if (SubmitType === 3) {
					let paramsPropList = ['SourceOrderNo', 'PreparePlanName', 'MaterialName', 'Code', 'ReportID',
						'Names', 'SubmitType'
					]
					let obj = {}
					paramsPropList.forEach(val => {
						obj[val] = rowData[val]
					})
					this.$u.route({
						url: 'pages/Isgo/abnormal/abnormal2',
						params: obj
					})
					return
				}
				if (SubmitType === 5) {
					let paramsPropList = ['SourceOrderNo', 'PreparePlanName', 'MaterialName', 'Code', 'ReportID',
						'Names', 'SubmitType', 'ID'
					]
					let obj = {
						isBeging: 'false',
					}
					paramsPropList.forEach(val => {
						obj[val] = rowData[val]
					})
					obj.ID = rowData.RecordID
					this.$u.route({
						url: 'pages/Isgo/abnormal/abnormal2',
						params: obj
					})
					return
				}
				if (SubmitType === 2) {
					const progress = rowData.TaskProgress
					if (progress <= this.defaultProgress) return uni.showToast({
						title: '请增加提交进度！',
						icon: 'error'
					})
				}
				const res = await this.$request.post({
					url: '/APSAPI/HandleTaskManagement',
					data: [rowData]
				}).catch(err => err)
				if (!res) return
				const {
					msg
				} = res
				this.handleTabClick(this.tabCurrent, msg)
			},
			handleTouchStart(event) {
				this.startX = event.touches[0].pageX;
				this.isClick = true; // 重置点击状态
			},
			handleTouchMove(event) {
				this.endX = event.touches[0].pageX;
				if (Math.abs(this.startX - this.endX) > 10) {
					this.isClick = false; // 如果移动距离大于10像素，认为是滑动事件
				}
			},
			handleTouchEnd() {
				if (!this.isClick) {
					if (this.startX - this.endX > 50) {
						//向左滑动
						if (this.tabCurrent < this.tabData.length - 1) this.handleTabClick(this.tabCurrent + 1)
					} else if (this.startX - this.endX < -50) {
						// 向右滑动
						if (this.tabCurrent > 0) this.handleTabClick(this.tabCurrent - 1)
					}
				}
			},
			progressChange(e, row) {
				const number = e.value >= 100 ? 100 : e.value <= 0 ? 0 : Number(e.value)
				this.$nextTick(() => {
					this.$set(row, 'TaskProgress', number)
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		min-height: calc(100vh - 88rpx);
		display: flex;
		flex-direction: column;
	}

	.main {
		background-color: $uni-bg-color-grey;
		flex-grow: 1;
		width: 100%;
		overflow-y: hidden;
		margin-top: 80rpx;

		.main-contanier {
			padding: 10rpx 15rpx;
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			padding-bottom: 96rpx;
		}
	}

	.task-details {
		width: 100%;
		padding: 20rpx 20rpx 20rpx 0;
		background-color: $uni-bg-color;
		border-radius: 5px;
		position: relative;
		margin-bottom: 15rpx;

		.task-head {
			// height: 40rpx;
			border-bottom: 1px solid $uni-border-color;
			margin-bottom: 10rpx;
			line-height: 50rpx;
			width: 100%;
			// text-overflow: warp;
			display: flex;
			flex-wrap: nowrap;
			background: linear-gradient(to right, $uni-color-primary, rgb(0, 122, 255, 0.15)) !important;
			padding-left: 20rpx;
			color: #fff;

			.head-label {
				max-width: 30%;
				min-width: 20%;
				// color: #050505;
			}

			.head-text-part {
				flex-grow: 1;
				line-height: 50rpx;
				// color: #000;
				text-indent: 5rpx;
				text-wrap: wrap;
			}
		}

		.list-1 {
			display: flex;
			// height: 100rpx;
			padding-left: 20rpx;

			.label {
				max-width: 30%;
				min-width: 20%;
				height: 50rpx;
				line-height: 50rpx;
				color: $uni-text-color-placeholder;
			}

			.text-part {
				flex-grow: 1;
				line-height: 50rpx;
				color: #000;
				text-indent: 5rpx;
				text-wrap: wrap;
			}
		}

		.list {
			padding-left: 20rpx;
			display: flex;
			// height: 50rpx;

			.label {
				max-width: 30%;
				min-width: 20%;
				height: 50rpx;
				line-height: 50rpx;
				color: $uni-text-color-placeholder;
			}

			.text-part {
				flex-grow: 1;
				line-height: 50rpx;
				color: #000;
				text-indent: 5rpx;
				text-wrap: wrap;
			}
		}

		.select-btn {
			// display: ;
			position: absolute;
			right: 20rpx;
			top: 0;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.button-part {
			position: absolute;
			top: 70rpx;
			right: 20rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			color: #fff;
			z-index: 10;

			.btn {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.primary {
				background-color: $uni-color-primary;
			}

			.success {
				background-color: $uni-color-success;
			}

			.warn {
				background-color: $uni-color-warning;
			}

			.error {
				background-color: $uni-color-error;
			}
		}
	}

	.btn-part {
		// display: f;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 96rpx;
		display: flex;
		align-items: center;
		color: #fff;
		z-index: 10;
	}
</style>